<template>
  <div class="home">
    <el-row :gutter="20">
      <el-col :span="5" :offset="1">
        <el-card header="分类" class="grid-content bg-purple-light classify">
          <el-input v-model="filterClassify" placeholder="请输入">
            <template #append>
              <el-button @click="reset">重置</el-button>
            </template>
          </el-input>
          <el-tree
            :data="classifyTree"
            :props="defaultProps"
            @node-click="handleNodeClick"
            ref="treeRef"
            :filter-node-method="filterNode"
            :expand-on-click-node="false"
            :highlight-current="true"
            accordion
            node-key="value"
          />
        </el-card>
        <el-card header="标签" class="grid-content bg-purple-light classify">
          <tags-wall :tags="tags"></tags-wall>
        </el-card>
      </el-col>
      <el-col :span="17">
        <el-card class="grid-content bg-purple-light">
          <template #header>
            <div class="card-header">
              <span>
                文章列表
                <span>
                  <span v-for="(classify, index) in classifies">
                    <el-divider direction="vertical" />
                    <el-button
                      type="text"
                      @click="handleNodeClick({
                        value: classify.classifyId,
                        label: classify.name,
                      })"
                    >{{ classify.name }}</el-button>
                  </span>
                </span>
              </span>
              <el-button class="button" type="text" :icon="Back" @click="reback">后退</el-button>
            </div>
          </template>
          <article-list ref="articleAction"></article-list>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { Back } from '@element-plus/icons-vue'
import { getClassifyTree, getTags, getClassifyParent } from '@/api/request'
import type { Tag, Tree, Classify } from '@/api/type'
import type { ElTree } from 'element-plus'
import { onBeforeRouteUpdate, useRoute } from 'vue-router';
import { onMounted, ref, watch } from 'vue';
import type { TreeOptionProps } from 'element-plus/es/components/tree/src/tree.type'

const treeRef = ref<InstanceType<typeof ElTree>>()

const defaultProps: TreeOptionProps = {
  children: 'children',
  label: 'label',
  class: () => 'customNodeClass'
}

const articleAction = ref()

const classifies = ref<Classify[]>()

const classifyId = ref(0)

const classifyTree = ref<Tree[]>()

const route = useRoute()

const tags = ref<Tag[]>()

const filterClassify = ref()

onMounted(async () => {
  classifyId.value = Number(route.params.pid)
  classifies.value = await getClassifyParent(classifyId.value)
  loadClassifies()
  loadTags()
})

onBeforeRouteUpdate(async to => {
  classifyId.value = Number(to.params.pid)
  classifies.value = await getClassifyParent(classifyId.value)
  loadClassifies()
})

watch(filterClassify, (val) => {
  treeRef.value!.filter(val)
})

const reback = () => {
  history.back()
}

const loadClassifies = async () => {
  classifyTree.value = await getClassifyTree(classifyId.value)
}

const loadTags = async () => {
  tags.value = await getTags()
}

const handleNodeClick = async (data: Tree) => {
  classifies.value = await getClassifyParent(data.value)
  articleAction.value!.selectNode(data.value)
}

const filterNode = (value: string, data: any) => {
  if (!value) return true
  return data.label.indexOf(value) !== -1
}

const reset = async () => {
  filterClassify.value = ''
  classifies.value = await getClassifyParent(classifyId.value)
  articleAction.value!.selectNode(classifyId.value)
  treeRef.value!.setCurrentKey('')
}
</script>
<style lang="less" scoped>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.classify {
  margin-bottom: 20px;
}
:deep(.customNodeClass) {
  margin: 15px 0px;
  .el-tree-node__label {
    font-size: var(--el-font-size-large);
  }
}
</style>